/*
* JavaScript ：是一门弱类型的程序设计语言，通常应用于客户端环境，例如web网页中，另外也可以基于非浏览器环境运行，例如：NodeJS；通常
* 认为js是一门脚本语言（需要嵌入到其他语言中运行）；早期的名称LiveScript --> ECMAScript --> JavaScript
*
* 与java语言区别：
* 1.js是单线程，但是支持异步；java是多线程的
* 2.js是弱类型语言；java是强类型语言
* 3.js是一门解释型语言；java是一门编译+解释型语言
* 4.js一般应用于客户端；java一般应用于服务端
*
* java定义变量
* int i = 10;
* String s = "hello";
* boolean b = true;
*
* js定义变量
* var i = 10;  //或 let i = 10;  const i = 10;
* var s = "hello";
* var b = true;
*
* 在js的基础上经过一些封装，产生了一个简化js操作的js库-JQuery
*/

// window.onload=function(){}; 原生JS文档加载

//jquery加载文档
$(function () {
    //音乐资源的基础访问地址
    const BASE_URL = "http://www.softeem.xin:8888/public/musicData/";
    //歌曲列表接口地址
    const MUSIC_LIST_URL = BASE_URL + "musicData.json";
    //声明空数组
    var musics = [];
    //初始化当前正在播放的歌曲列表索引
    var currentIndex = 0;
    //创建一个audio元素用于实现歌曲的播放
    var player = $('<audio>');
    //声明当前播放时间
    var now = 0;
    //总播放时间
    var total = 0;
    //标记当前播放器的播放状态（true:正在播放，false:停止）
    var playing = false;
    //循环方式：0-列表循环  1-随机播放  2-单曲
    var loopType = 0;

    //使用ajax请求远程服务器提供的资源
    $.get(MUSIC_LIST_URL, function (data) {
        //将读取到的远程数据缓存到数组中
        musics = data;
        //数据绑定（将远程服务器的歌曲数据，绑定到页面中）
        //循环遍历
        $.each(musics, function (i, m) {
            //将读取的每一首歌曲创建为li元素并追加到ul中
            $('.music-list').append(`<li data-index="${i}"><i class="fas fa-music"></i>${m.musicName}</li>`)
        })
    })

    //使用事件委派(委托)机制实现动态产生元素的事件绑定
    $('.music-list').on('click', 'li', function () {
        //移除上一首歌曲的高亮状态
        $(`li:eq(${currentIndex})`).removeClass('active');
        //获取被点击的歌曲索引
        currentIndex = $(this).data('index');
        //获取需要播放的歌曲对象
        let m = musics[currentIndex];
        //设置播放器的播放源
        player.prop('src', BASE_URL + m.musicPath);
        startPlay();
    })

    //开始播放：执行播放以及状态同步，唱片，歌曲名，进度，时间等
    function startPlay() {
        //标记播放器正在播放
        playing  = true;
        //开启定时任务播放音乐资源
        var flag = setInterval(function () {
            //判断音乐资源的第一帧是否加载完毕
            if (player.prop('readyState') === 4) {
                //触发播放器的play函数（播放）
                player.trigger('play');
                //取消定时任务
                clearInterval(flag);
            }
        }, 50)

        //切换按钮图片为暂停
        $('.btn-play-pause').html('<i class="fas fa-pause fa-4x"></i>');
        //唱片旋转
        $('.cover').addClass('playing');
        //切换唱片图片
        $('.music-body img').prop('src', BASE_URL + musics[currentIndex].picPath);
        //显示歌曲名
        $('.music-name').text(musics[currentIndex].musicName);
        //激活列表项高亮状态
        $(`li:eq(${currentIndex})`).addClass('active');
    }

    //当歌曲的资源的第一帧加载完成之后执行如下回调
    player.on('loadeddata', function () {
        //获取歌曲的总播放时长（秒）
        total = player.prop('duration');
        $('.time-total').text(fmtTime(total));
    })

    //当歌曲的播放时间改变时执行（反复执行，直到歌曲播放完成）
    player.on('timeupdate', function () {
        //获取实时的歌曲播放时间位置
        now = player.prop('currentTime');
        //计算实时播放进度
        let progress = now / total * 100 + '%';
        //将实时进度作为进度宽度
        $('.progress').css('width', progress);
        //设置当前播放时间
        $('.time-now').text(fmtTime(now));
    })

    //时间格式化函数，用于将以秒为单位的时间转换为mm:ss格式
    function fmtTime(time) {
        //将以秒为单位时间转换为毫秒，并构建为日期对象
        let date = new Date(time * 1000);
        //获取当前日期表示分和秒
        let m = date.getMinutes();
        let s = date.getSeconds();
        //确保时间格式至少两位
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;
        return m + ":" + s;
    }

    //为进度条盒子绑定点击事件，实现歌曲进度改变
    $('.progress-box').on('click',function(e){
        let x = e.offsetX;
        let w = $(this).width();
        //根据点击位置和总宽度获取进度比，然后再乘以总时长，结果则为跳转到的位置
        now = x / w * total;
        //该变进度
        player.prop('currentTime',now);
    })

    //为按钮绑定点击事件控制歌曲暂停或继续播放
    $('.btn-play-pause').on('click',function(){
        //根据标记状态决定暂停还是继续播放
        if(playing){
            //暂停
            pause();
        }else{
            //播放
            startPlay();
        }
    })

    //暂停播放
    function pause(){
        //标记播放器暂停
        playing = false;
        //暂停播放
        player.trigger('pause');
        //唱片停止旋转
        $('.cover').removeClass('playing');
        //按钮表改变为播放图标
        $('.btn-play-pause').html('<i class="fas fa-play fa-4x"></i>');
    }

    //按钮点击切换循环方式
    $('.btn-loop').on('click',function(){
        //修改循环方式
        loopType = ++loopType % 3;
        if(loopType === 0){
            //列表
            $(this).html('<i class="fas fa-exchange"></i>')
            $('#msg').text('列表循环');
        }else if(loopType === 1){
            //随机
            $(this).html('<i class="fas fa-shuffle"></i>')
            $('#msg').text('随机播放');
        }else{
            //单曲
            $(this).html('<i class="fas fa-sync"></i>')
            $('#msg').text('单曲循环');
        }
        //显示提示框
        $('#msg').fadeIn(800,function(){
            $(this).fadeOut(800);
        })
    })

    //切歌 dir='prev'/'next'
    function change(dir){
        //移除上一首歌曲的高亮状态
        $(`li:eq(${currentIndex})`).removeClass('active');
        if(loopType === 0){
            if(dir === 'prev') {
                //索引减1
                currentIndex = --currentIndex < 0 ? musics.length - 1 : currentIndex;
            }else{
                //索引加1
                currentIndex = ++currentIndex >= musics.length ? 0 : currentIndex;
            }
        }else if(loopType === 1){
            //获取随机索引
            currentIndex = Math.floor(Math.random() * musics.length)
        }
        player.prop('src',BASE_URL+musics[currentIndex].musicPath);
        startPlay();
    }

    //点击切换上一曲
    $('.btn-prev').on('click',function(){
        change('prev')
    })
    //点击切换下一曲
    $('.btn-next').on('click',function(){
        change('next')
    })

    //播放器已经播放到歌曲末尾时指定回调
    player.on('ended',function(){
        change('next');
    })



    //选中指定元素（选择器），并为元素绑定‘点击’事件
    $('.btn-list').click(function () {
        //抽屉弹出
        $('.music-list-wrapper').animate({top: '10rem'}, 200, function () {
            //执行完毕动画时，显示关闭按钮
            $('#btnClose').show();
        });
    })
    $('#btnClose').on('click', function () {
        //抽屉收缩
        $('.music-list-wrapper').animate({top: '100%'}, 200);
        //隐藏关闭按钮
        $('#btnClose').hide();
    })

})


